<template>
  <div class="login-wrap">
    <el-form label-position="left" :model="DataForm"  label-width="100px" class="login-container">
      <h3 class="title">密钥资源申请列表</h3>
      <h4>
        <el-button  style="width:100%;border: none !important;" @click="showPdfForm" :loading="logining">使用说明文档</el-button>
      </h4>
      <el-form-item label="登录key" prop="authStr">
        <div v-if="DataForm.authStr!=='' && DataForm.authStr!=='null' && DataForm.authStr!==null">
          <el-button class="copybtn" @click="handleCopy(DataForm.authStr)">{{ DataForm.authStr }}</el-button>
        </div>
        <div v-else>
          <el-input class="copybtn" v-model="DataForm.authStr" auto-complete="off" readonly></el-input>
        </div>
      </el-form-item>
      <el-form-item label="nextchat地址" prop="nextChatUrl">
        <div v-if="DataForm.authStr!=='' && DataForm.authStr!=='null' && DataForm.authStr!==null">
          <a :href="DataForm.nextChatUrl" target="_blank">{{ DataForm.nextChatUrl }}</a>
<!--          <el-button class="copybtn" @click="handleCopy(DataForm.nextChatUrl)">{{ DataForm.nextChatUrl }}</el-button>-->
        </div>
        <div v-else>
          <el-input class="copybtn" v-model="DataForm.nextChatUrl" auto-complete="off" readonly></el-input>
        </div>
      </el-form-item>
      <el-form-item label="申请人ip" prop="remoteIP">
        <el-input size="small" v-model="DataForm.remoteIP" auto-complete="off" readonly></el-input>
      </el-form-item>

      <el-form-item style="width:100%;">
        <div v-if="DataForm.authStr!==''&& DataForm.authStr!=='null' && DataForm.authStr!==null">
<!--          <el-button type="primary" style="width:100%;" @click="unApplyUserKey()">取消申请</el-button>-->
        </div>
        <div v-else>
          <el-button type="primary" style="width:100%;" @click="applyUserKey()">申请key</el-button>
        </div>
      </el-form-item>
    </el-form>
<!--    &lt;!&ndash;列表&ndash;&gt;-->
<!--    <el-table  :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" style="width: 100%;">-->
<!--&lt;!&ndash;      <el-table-column align="center" type="selection" width="60">&ndash;&gt;-->
<!--&lt;!&ndash;      </el-table-column>&ndash;&gt;-->
<!--      <el-table-column sortable align="center" prop="id" label="主键id" width="100" v-if="false">-->
<!--      </el-table-column>-->
<!--      <el-table-column sortable align="center" prop="authStr" label="用户登录key" width="200">-->
<!--        <template slot-scope="scope">-->
<!--          <div v-if ="scope.row.authStr==='********'">-->
<!--            <span>{{ scope.row.authStr }}</span>-->
<!--          </div>-->
<!--          <div v-else>-->
<!--            <el-button class="copybtn" @click="handleCopy(scope.row.authStr)">{{ scope.row.authStr }}</el-button>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column sortable align="center" label="占用状态" width="100">-->
<!--        <template slot-scope="scope">-->
<!--        <span :style="getStatusStyle(scope.row.remoteIp)">-->
<!--          {{ scope.row.remoteIp===null?'未占用':'已占用' }}-->
<!--        </span>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--      <el-table-column sortable align="center" prop="occupyStartTime" label="占用时间" width="200" >-->
<!--      </el-table-column>-->
<!--      <el-table-column sortable align="center" prop="duration" label="占用时长（s）" width="200" >-->
<!--      </el-table-column>-->
<!--      <el-table-column sortable align="center" prop="remoteIp" label="占用ip" width="200" >-->
<!--      </el-table-column>-->
<!--      <el-table-column align="center" label="操作" max-width="400">-->
<!--        <template slot-scope="scope">-->
<!--          <div v-if="isshowpwd">-->
<!--            <div v-if="isbind">-->
<!--              <el-button size="mini" v-if="scope.row.authStr!=='********'" @click="unApplyUserKey(scope.$index, scope.row)">取消申请用户key</el-button>-->
<!--            </div>-->
<!--            <div v-else>-->
<!--              <el-button size="mini" v-if="scope.row.remoteIp===null" @click="applyUserKey(scope.$index, scope.row)">申请登录key</el-button>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div v-else>-->
<!--            <el-button size="mini"  @click="applyUserKey(scope.$index, scope.row)">申请登录key</el-button>-->
<!--          </div>-->

<!--&lt;!&ndash;          <div v-if="scope.row.remoteIp===null">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-button size="mini"  @click="applyUserKey(scope.$index, scope.row)">申请登录key</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;          <div v-else>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-button size="mini"  @click="unApplyUserKey(scope.$index, scope.row)">取消申请用户key</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!--    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>-->

    <!-- 用户使用须知界面 -->
    <el-dialog :title="title" :visible.sync="pdfFormVisible" width="60%" @click='closeDialog("pdf")'>
<!--      <div>-->
<!--        <h3 class="title">用户使用须知</h3>-->
<!--      </div>-->
      <div>
        <!-- 注意这里使用的是相对于public目录的绝对URL，因为它在构建后会被放在dist的根目录下 -->
        <iframe :src="pdfUrl" width="100%" height="400px"></iframe>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click='closeDialog("pdf")'>退出</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import {applyUserKey, getClientIP, getKey, login, unApplyUserKey, userAuthList} from '../api/userMG'
import { setCookie, getCookie, delCookie } from '../utils/util'
import md5 from 'js-md5'
import Pagination from "../components/Pagination.vue";
export default {
  name: 'login',
  components: {Pagination},
  data() {
    return {
      formInline: {
        pageNum: 1,
        pageSize: 10,
        ipname:''
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 1
      },
      DataForm:{
        authStr:'',//登录key
        nextChatUrl:'',//nextchat地址
        remoteIP:''   //申请人ip
      },
      listData: [], //列表集合
      title: '用户使用须知',
      pdfFormVisible:false,
      pdfUrl: '/static/example.pdf',
      loading:false,
      isshowpwd:false,
      clientIP:'',
      isbind:false

    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    this.getdata()

  },
  // 里面的函数只有调用才会执行
  methods: {
    handleCopy(text) {
      // 创建一个临时的textarea元素
      const textarea = document.createElement('textarea');
      // 设置为不可见
      textarea.style.position = 'fixed'; // 防止页面滚动
      textarea.style.opacity = 0;
      // 设置textarea的值为需要复制的内容
      textarea.value = text;
      // 将textarea添加到body中
      document.body.appendChild(textarea);
      // 选中textarea的内容
      textarea.select();
      // 执行复制操作
      document.execCommand('copy');
      // 移除textarea元素
      document.body.removeChild(textarea);
      // 可以选择性地给用户一些反馈，比如显示一个Toast消息
      this.$message({
        message: '复制成功',
        type: 'success',
      });
    },
    getStatusStyle(status) {
      let color;
      if(status===null){
        color = 'green';
      }else {
        color = 'red';
      }
      return { color };
    },
    // 获取模型列表
    getdata() {
      getClientIP()
        .then(res => {
          if(res.code==null){
            this.$message.error('获取ip操作失败！')
          }
          if(res.data==null){
            this.$message.error('获取ip操作失败！')
          }
          userAuthList(res.data)
            .then(res => {
              console.log("clientIP:"+this.clientIP)

              this.loading = false
              console.log(res)
              if(res.code==null){
                this.$message({
                  type: 'info',
                  message: '查询失败'
                })
              }
              if (res.code!=0) {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              } else {
                this.loading = false
                this.DataForm = res.data
                // // 分页赋值
                // this.pageparm.currentPage = this.formInline.current
                // this.pageparm.pageSize = this.formInline.size
                // this.pageparm.total = res.data.total
                // this.isshowpwd = res.data.isshowpwd !== 0
                // this.isbind = res.data.isbind
                console.log(this.DataForm)
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('获取列表失败，请稍后再试！')
            })
        }).catch(err => {
        this.$message.error('获取key操作失败！'+err)
      });


    },
    // 分页插件事件
    callFather(parm) {
      console.log(parm)
      this.formInline.pageNum = parm.currentPage
      this.formInline.pageSize = parm.pageSize
      this.getdata()
    },
    // 获取key方法
    applyUserKey() {
      getClientIP()
        .then(res => {
          if(res.code==null){
            this.$message.error('获取ip操作失败！')
          }
          if(res.data==null){
            this.$message.error('获取ip操作失败！')
          }
          applyUserKey(res.data)
            .then(res => {
              if(res.code==null){
                this.$message.error('获取key操作失败！')
              }
              console.log(res.success)
              if (res.code==0) {
                this.getdata()
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('获取key操作失败！')
            })

        }).catch(err => {
        this.$message.error('获取key操作失败！'+err)
      });

    },
// 获取key方法
    unApplyUserKey(index, row) {
      unApplyUserKey(params)
        .then(res => {
          if(res.code==null){
            this.$message.error('获取key操作失败！')
          }
          console.log(res.success)
          if (res.code==0) {
            this.getdata()
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            })
          }
        })
        .catch(err => {
          this.editFormVisible = false
          this.loading = false
          this.$message.error('获取key操作失败！')
        })
    },
    //显示使用说明文档界面
    showPdfForm() {
      this.pdfFormVisible=true
      this.title = '用户使用须知'
    },
    // 关闭编辑、增加弹出框
    closeDialog(dialog) {
      if (dialog == 'pdf') {
        this.pdfFormVisible = false
      }
    },
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url();
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}
.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 800px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.remember {
  margin: 0px 0px 35px 0px;
}
.code-box {
  text-align: right;
}
.codeimg {
  height: 40px;
}
</style>
